<!DOCTYPE html>
<html>
<head>

<title>
School Info
</title>

<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo.com" />

<!-- CSS -->
<link rel="stylesheet" href="../css/structure.css" type="text/css" />
<link rel="stylesheet" href="../css/form.css" type="text/css" />

<!-- JavaScript -->
<!--<script type="text/javascript" src="scripts/wufoo.js"></script> -->

<!--[if lt IE 9] -->
<!--<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> -->
<!--[endif]-->
<!--/head-->
  <script type="text/javascript"><!--

  function loadCountry(){
		var xhttp=false;
		if (window.XMLHttpRequest)
		  {
		  xhttp=new XMLHttpRequest();
		  }
		else // for IE 5/6
		  {
		  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
//	    var country=document.getElementById('Field102').value;
	    xhttp.open("POST","/FetchAllCountriesServlet",true);
		xhttp.send();
		xhttp.onreadystatechange=handleServerResponseforCountry(xhttp);

	}



	function handleServerResponseforCountry(xmlHttpRequest) {
		
	    	return function(){
			if (xmlHttpRequest.readyState == 4) {
			
				if (xmlHttpRequest.status == 200) {

	              // Var is a big string with ,country1,country2,country3...etc
					// Want to seperate into 3 variables with var1 = country1, var2 = country2, var3 = country3			
					var countryString = xmlHttpRequest.responseText;
					breakupString(countryString,'countrylist' );
					document.getElementById('countryInput').style.display='block';
					document.getElementById('countrylabel').style.display='block';
					
	              }
				else {
				
					alert("Error during AJAX call. Please try again");
				}
			}
		}

	}
	function insertOptionBefore(text1, text2)
	{
	 var elSel = document.getElementById(text2);
	  document.getElementById(text2).style.display='block';
	  if (elSel.selectedIndex >= 0) {
	    var elOptNew = document.createElement('option');
	    elOptNew.text =  text1;
	    elOptNew.value = text1;
	    
	    var elOptOld = elSel.options[elSel.selectedIndex];  
	    try {
	      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
	    }
	    catch(ex) {
	      elSel.add(elOptNew, elSel.selectedIndex); // IE only
	    }
	  }
	}


	function breakupString (breakString, idString){

		//word[0] contains "Welcome", word[1] contains "to" etc
		var brokenString = breakString.split(",");
		for (i = 1; i < brokenString.length; i++)
		{	
			insertOptionBefore(brokenString[i],idString);
		}
			

	}

	
	function findState()
	{
		var xhttp=false;
		if (window.XMLHttpRequest)
		  {
		  xhttp=new XMLHttpRequest();
		  }
		else // for IE 5/6
		  {
		  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	    var country=document.getElementById('countrylist').value;
	    xhttp.open("POST","/findStateServlet?country="+country,true);
		xhttp.send();
		xhttp.onreadystatechange=handleServerResponseforfindState(xhttp);
	}

	function handleServerResponseforfindState(xmlHttpRequest) {
		
		return function(){
			if (xmlHttpRequest.readyState == 4) {
			
				if (xmlHttpRequest.status == 200)
			    {
					var stateString = xmlHttpRequest.responseText;
					breakupString(stateString,'statelist' );
					document.getElementById('stateInput').style.display='block';
					document.getElementById('statelabel').style.display='block';
					
				}
				else {
					alert(xmlHttpRequest.status );
					alert("Error during AJAX call. Please try again");
				}
			}
		}

	}

	function findSchool()
	{
		var xhttp=false;
		 
		if (window.XMLHttpRequest)
		  {
		  xhttp=new XMLHttpRequest();
		  }
		else // for IE 5/6
		  {
		  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	    var country=document.getElementById('countrylist').value;
	    var state= document.getElementById('statelist').value;
	    xhttp.open("POST","/GetSchoolListServlet?country="+country+"&state="+state,true);
		xhttp.send();
		xhttp.onreadystatechange=handleServerResponseforfindSchool(xhttp);
	}

	function handleServerResponseforfindSchool(xmlHttpRequest) {
		
		return function(){
			if (xmlHttpRequest.readyState == 4) {
				
				if (xmlHttpRequest.status == 200)
			    {
				   
					var schoolString = xmlHttpRequest.responseText;
					breakupString(schoolString,'schoollist' );
		     		document.getElementById('schoolInput').style.display='block';
					document.getElementById('schoollabel').style.display='block';
					document.getElementById('websitelabel').style.display='block';
					document.getElementById('website').style.display='block';					
				}
				else {
					alert(xmlHttpRequest.status );
					alert("Error during AJAX call. Please try again");
				}
			}
		}

	}

	
	

--></script>
</head>

<body id="public">

	
	
<div id="container">
<!--<form action = "/addUserToDatabase" id="form125" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" action="#public" novalidate> -->
<form action="/AddSchoolInfoServlet" method="post" id="form125">

<!--<header id="header" class="info">-->
<!--	<h2>Add school information to database</h2>-->
<!--	<div></div>-->
<!--</header>-->

<ul>

<li id="foli102" 		class="     ">
	<!-- label class="desc" id="title102" for="Field102"  Country:-->
		
			<!-- /label -->
	<!-- span -->
		<!-- input id="Field102" 			name="country" 			type="text" 			class="field text fn" 			value="" 			size="8" 			tabindex="1" 									/-->
	<!-- /span -->
	
	<button type="button" onclick="loadCountry()">Select Country</button>

	<select id="countrylist"  style="display:none" name="countrySelect">
	<option value="Country" selected="selected"> Country </option>

	</select>
	
	<label class="desc" id="countrylabel" for="Field102"  style="display:none">
		Or Enter another Country:
			</label >
	<span>
		<input id="countryInput" 	style="display:none"		name="countryInputBox" 			type="text" 			class="field text fn" 			value="" 				tabindex="3" 			maxlength="255"						/>
		<!--<label for="Field102">First</label>-->
	</span>

</li>	

<li id="foli102" 		class="     ">
	<!-- label class="desc" id="title102" for="Field102" state -->
	
			<!--/label  -->
	<button type="button" onclick="findState()">Select state</button>

	<select id="statelist"  style="display:none" name="stateSelect" >
	<option value="States" selected="selected"> States </option>

	</select>
  
     <label class="desc" id="statelabel" for="Field102"  style="display:none">
		Enter another state:
			</label >
	<span>
		<input id="stateInput" 	style="display:none"		name="stateInputBox" 			type="text" 			class="field text fn" 			value="" 				tabindex="3" 			maxlength="255"						/>
		<!--<label for="Field102">First</label>-->
	</span>


	</li>	
		
<li id="foli102" 		class="     ">
	
	<button type="button" onclick="findSchool()">Select School</button>

	<select id="schoollist"  style="display:none" name="schoolSelect">
	<option value="School" selected="selected"> School </option>

	</select>
	
	<label class="desc" id="schoollabel" for="Field102"  style="display:none">
		Enter another school:
			</label >
	<span>
		<input id="schoolInput" 	style="display:none"		name="schoolInputbox" 			type="text" 			class="field text fn" 			value="" 				tabindex="3" 			maxlength="255"						/>
		<!--<label for="Field102">First</label>-->
	</span>

	</li>
	<li id="foli105" 		class="     ">
	<label class="desc" id="websitelabel"  for="Field105" style="display:none"  >
		website:
			</label>
	<div>
		<input id="website" 	style="display:none"		name="website" 			type="text" 			class="field text medium" 			value="" 						maxlength="255" 						tabindex="4" 			onkeyup="" 									/>
			</div>
	</li>
	
	

<!--<li id="foli104" 		class="     ">-->
<!--	<label class="desc" id="title104" for="Field104">-->
<!--		School ID:-->
<!--			</label>-->
<!--	<div>-->
<!--		<input id="Field104" 			name="schoolId" 			type="text" 			spellcheck="false" 			class="field text medium" 			value="" 			maxlength="255" 			tabindex="3" 									/> -->
<!--	</div>-->
<!--	</li>-->
<!---->
<!--<li id="foli104" 		class="     ">-->
<!--	<label class="desc" id="title104" for="Field104">-->
<!--		School Name:-->
<!--			</label>-->
<!--	<div>-->
<!--		<input id="Field104" 			name="schoolName" 			type="text" 			spellcheck="false" 			class="field text medium" 			value="" 			maxlength="255" 			tabindex="3" 									/> -->
<!--	</div>-->
<!--	</li>-->
<!---->
<!--<li id="foli105" 		class="     ">-->
<!--	<label class="desc" id="title105" for="Field105">-->
<!--		website:-->
<!--			</label>-->
<!--	<div>-->
<!--		<input id="Field105" 			name="website" 			type="text" 			class="field text medium" 			value="" 						maxlength="255" 						tabindex="4" 			onkeyup="" 									/>-->
<!--			</div>-->
<!--	</li>-->
<!---->
<!--<li id="foli105" 		class="     ">-->
<!--	<label class="desc" id="title105" for="Field105">-->
<!--		Total Students:-->
<!--			</label>-->
<!--	<div>-->
<!--		<input id="Field105" 			name="totalStudents" 			type="text" 			class="field text medium" 			value="" 						maxlength="255" 						tabindex="4" 			onkeyup="" 									/>-->
<!--			</div>-->
<!--	</li>	-->
</ul>
	<input type="submit" value="Submit" />
</form>

</div><!--container-->


</body>
</html>